@use "./process-designer.scss";
@use "./process-panel.scss";

$success-color: #4eb819;
$primary-color: #409eff;
$danger-color: #f56c6c;
$cancel-color: #909399;

.process-viewer {
	position: relative;
	border: 1px solid #efefef;
	background: url("")
		repeat !important;

	.success-arrow {
		fill: $success-color;
		stroke: $success-color;
	}

	.success-conditional {
		fill: white;
		stroke: $success-color;
	}

	.success.djs-connection {
		.djs-visual path {
			stroke: $success-color !important;
			//marker-end: url(#sequenceflow-end-white-success)!important;
		}
	}

	.success.djs-connection.condition-expression {
		.djs-visual path {
			//marker-start: url(#conditional-flow-marker-white-success)!important;
		}
	}

	.success.djs-shape {
		.djs-visual rect {
			stroke: $success-color !important;
			fill: $success-color !important;
			fill-opacity: 0.15 !important;
		}

		.djs-visual polygon {
			stroke: $success-color !important;
		}

		.djs-visual path:nth-child(2) {
			stroke: $success-color !important;
			fill: $success-color !important;
		}

		.djs-visual circle {
			stroke: $success-color !important;
			fill: $success-color !important;
			fill-opacity: 0.15 !important;
		}
	}

	.primary.djs-shape {
		.djs-visual rect {
			stroke: $primary-color !important;
			fill: $primary-color !important;
			fill-opacity: 0.15 !important;
		}

		.djs-visual polygon {
			stroke: $primary-color !important;
		}

		.djs-visual circle {
			stroke: $primary-color !important;
			fill: $primary-color !important;
			fill-opacity: 0.15 !important;
		}
	}

	.danger.djs-shape {
		.djs-visual rect {
			stroke: $danger-color !important;
			fill: $danger-color !important;
			fill-opacity: 0.15 !important;
		}

		.djs-visual polygon {
			stroke: $danger-color !important;
		}

		.djs-visual circle {
			stroke: $danger-color !important;
			fill: $danger-color !important;
			fill-opacity: 0.15 !important;
		}
	}

	.cancel.djs-shape {
		.djs-visual rect {
			stroke: $cancel-color !important;
			fill: $cancel-color !important;
			fill-opacity: 0.15 !important;
		}

		.djs-visual polygon {
			stroke: $cancel-color !important;
		}

		.djs-visual circle {
			stroke: $cancel-color !important;
			fill: $cancel-color !important;
			fill-opacity: 0.15 !important;
		}
	}
}

.process-viewer .djs-tooltip-container,
.process-viewer .djs-overlay-container,
.process-viewer .djs-palette {
	display: none;
}
